3. Visualization of hierarchical data

Large hierarchical data

Yahoo! directory

File system

Address

Music titles

Genealogical tree

Yahoo! directory

https://gyazo.com/ae96f3bfcf56be51e446eaffd0ca43b8

Characteristics of hierarchical data

Clear structure and attribute

e.g. Address

Clear upper-lower relation

e.g. genealogical tree

Characteristics of hierarchical data (Cont'd)

More data in lower layer

Upper layer more important

Lower data are concrete

Represented as tree structure

The book of trees

https://www.amazon.co.jp/dp/1616892188 https://gyazo.com/a8074bf710cb2e6a2bc5ade975135764

Tree structure of a formula

http://gyazo.com/32469fa66a4ae65b4022aa9718f8f8d3.png

HTML data structure

http://gyazo.com/355feecdbfaa01ef0da96bc560b74320.png

Visualization of tree structure

Show the "root" at the top

Sometimes at the side or bottom

Drawing root at bottom(Genealogical tree)

http://gyazo.com/83a76f5aaefd3592b0ccbee02150e4fb.png

Genealogical tree

http://gyazo.com/520100adac7a90a51e822a3401d490b2.png

Drawing root at center

http://gyazo.com/a3b9e76f922bc94bed8a260fa34d2372.png

Lisp program

https://gyazo.com/34aaa559a8b3b38d2c26b49ac1493d60.png

Show hierarchy by indentation

Title

Subtitle

Subtitle

Subsubtitle

Outline editor

YAML, Coffee, Python, Occam, ...

Coffee program

Outline editor example

https://gyazo.com/a023e1e574da363fc2e502cd902ff785

Any data can be treated as hierarchical data

Classification => hierarchical data

Classification methods

Clustering

Decition tree

Attributes

Simple dictionary can be treated as hiearchical data

Hierarchical clustering

while true do

Convert similar data into a group

end

Create a dendrogram

Dendrogram

http://gyazo.com/8e29cfe0ddb3c4be8c90975b508391ca.png

Decision tree

Tree structure for decision making

http://gyazo.com/a00d96e0884109882687afcdafc8f4ba.png

Data for creating decision tree

http://gyazo.com/8854bb03d28a57147efe4bafd9a5eebd.png

https://gyazo.com/c82d4e0adb69cef20c9f6d28aff451e3

Mindmap

http://gyazo.com/5f8a2431610cc8029a5956a95ab6fd92.png

Tree structure layout

No "loop"

No edge crossing

Laying out nodes without overlaps

Various tree visualization techniques

http://gyazo.com/24b06de5c93d8e4bf4db4aa2efe11158.png

File systems

Most popular data structure on computer

Unix file system

http://gyazo.com/e3c2b3f9c7cc08e741b558715148c403.png

File system browser

Folder icons, folder windows

TreeView

ConeTree

Showing a folder as a window

Popular on current GUI

http://gyazo.com/a4d34097cf906b241f8cb3870ee15fc7.png

"Dock" on MacOS

http://gyazo.com/f52a885c0fdf92da838ee6275d5e555b.png

TreeView

Explorer on Windows

http://gyazo.com/1075e21eac6b8665321eb4b091712fbe.png

https://gyazo.com/f1118d9245c19065af9db0988f5e3113.png

Cone Tree

Showing a tree structure as a corn

Interactively rotate cones

http://gyazo.com/175eeb88e1ce468763e8f3f797f68e83.png

Video: Cone Tree

https://s3-ap-northeast-1.amazonaws.com/masui.org/f/f/ff7c691232fd5e2121ed2985d37bb3d1.mp4

http://gyazo.com/031ecbe3d8afed0d00338b871ce6bf4b.png

Showing inifinite elements in a circle

http://gyazo.com/dd6315efbef37720b282b507d5499071.png

http://gyazo.com/c233444d864cb09b2cdd02d60213caa2.png

Fractal visualization

Draw a tree considering the number of children nodes

Show distant nodes with small number of children

Many hierarchical data are self-similar

Control the amount of display based on fractal attribute

Fractal structure

Shape of a portion same as the whole

Visualized as a tree structure

http://gyazo.com/c5fe826b0dba6d4b102f007e54a817b5.png

Self-similar shapes

http://gyazo.com/4ec1b6796e4d28d80964bb9d9fb83f49.png

FractalView

Control

Control the number of nodes and edges

http://gyazo.com/c9f9ca303d5cc601756d1f07da259265.png

Visualiation of file sizes

Various methods exist

Appicable for other hierarchical structures

e.g. visualization of national budget

Map hierarchical structure into 2D rectangles

Divide rectangles into smaller rectangles based on file sizes

http://gyazo.com/7a4d9163a3843a08562ccd88425bde24.png

The new ABCs of Research

By Ben Shneiderman

Background stories of Treemap

https://www.amazon.co.jp/dp/0198812175 https://gyazo.com/420051e9d4136c0b6e690419687a369c

Today's news article

http://livedoor.blogimg.jp/hiroset/imgs/f/a/fa2f8e50.png

Video: Treemap

https://www.youtube.com/watch?v=-QXYR75jmcM

Video: Treemap on Tableau

https://www.youtube.com/watch?v=4Sx3VQg7LgI

Video: TreemapDecision

https://s3-ap-northeast-1.amazonaws.com/masui.org/2/5/25ff1b1d1513581d938c10b8d9629209.mp4

http://gyazo.com/f875b6793692b7d466235e41b9b9642b.png

http://gyazo.com/b8023bc4426a31f2b45e07708d93378e.png

http://gyazo.com/d5d08abf825731f073c7e67b8a47a971.png

TreeMap + dynamic query

http://gyazo.com/99d5711c79e133727169d8dcc10c4b3a.png

Sunburst: use concentric circles

http://gyazo.com/bb0087bb020cb744349553b7ad25f70f.png

Root at the center

Divide a circle based on folder size

http://gyazo.com/105523c43eea6892fba4a76694f5a5bc.png

http://gyazo.com/2617744eadb6f89020c9cdba050b9974.png

Application of file visualization systems

Map arbitrary hierarchical data to file sizes

Use file visualization systems for browsing the data

Visualization of Yahoo! directory

http://gyazo.com/655e78e7d889f2f63993951a26a86a18.png

Visualization of Yahoo! directory

http://gyazo.com/c197069749f0443a3ca7b779c9ac468f.png

Visualization of national budget

http://gyazo.com/df597f3f71e3cd4303cfac7adce0e2a1.png

Zooming systems

Pad

Pad++

Jazz/Piccolo

PhotoMesa

WING

LensBar

Pad

Original proposal of ZUI

Infinite 2D zooming for showing everything

Hierarchical data can be visualized

http://gyazo.com/ac6d1d466a3a68d8ddc62ac7849d6f05.png

Video: Pad

https://s3-ap-northeast-1.amazonaws.com/masui.org/8/e/8e9977379b84135c2a50440181883b9a.mp4

Extention to Pad

Filtering, Overview+Detail, etc.

Toolkits

Jazz, Piccolo

http://gyazo.com/32e11ad6ab6a556209c51a7951c3a1cf.png

PhotoMesa

Photo browser based on Piccolo

Treemap + Zooming

http://gyazo.com/e01855e94acbb3876cb94a29e9ce906f.png

Video: PhotoMesa

https://s3-ap-northeast-1.amazonaws.com/masui.org/6/9/69a65c14537ffe9507eb0aa0cbd09bbf.mp4

WING

Zooming-based information retrieval

1D/2D/3D Zooming

Intuitive browsing using various attributes

http://gyazo.com/c873d6caf7835e2101201a4552f3e610.png

Demo: WING

LensBar

Extended scrollbar with zooming

Dynamic approximate matching + nonlinear zooming

Visualizing matched data in the background

http://gyazo.com/9a3c43aab951436c406e7228aa41d0a0.png

Demo: LensBar

Demo: Zooming photo browser

http://masui.sfc.keio.ac.jp/RainbowToomer/photobrowser.html http://gyazo.com/bd2a0dfe3f47e927ebfd6e6367917e9c.png

Demo: Zooming conference program

http://masui.org/i http://gyazo.com/1e13c164f5cf599c2e796a3281c8d67a.png

Demo: Gyazo viewer

Characteristics of ZUI

Smooth interaction

Continuous and reversible

No successful systems

Get int "desert"

ZUI not popular yet

Handling hierarchical data

Information in the brain not organized hierarchically

Hierarchical data difficult for humans

Vague data difficult to organize as hierarchy

Is hierarchical manipulation reasonable?

e.g. Mindmap

http://gyazo.com/5f8a2431610cc8029a5956a95ab6fd92.png

Limitations of hierarchical data structure

Valid only for strictly layered data

Links between nodes not allowed

Upper/lower layers should be clear

Most hierarchical data are created by humans

Anything can be hierarchically organized

e.g. Hierarchical structure based on human weight

Limitations of hierarchical data structure

Classified in single category

Only one instance allowed

Gear: "Super" navigation

https://serencast.com/masui/Watch3 http://gyazo.com/ab4ff7c2d44f4af2bb94fae76589f495.png

Navigation with two switches

Handling non-hierarchical data

Network visualization

Multi-attribute visualization